<template class="big">
	<view class="" style="margin: 20rpx;">
		<!-- 登陆后显示的页面 -->
		<view class="islogin" v-if="token">
			<!-- 上面按钮 -->
			<view class="shangmian">
				<text style="float: left;font-size: 28rpx;margin-left: 20rpx;">购物车</text>
				<text style="float: right;font-size: 28rpx;margin-right: 20rpx;color: deepskyblue">编辑</text>
			</view>
			<!-- 下方获取到的数据1 -->
			<!-- 多选框地址:https://www.uviewui.com/components/checkbox.html -->
			<view class="zhongjian">
				<!-- 多选框 -->
				<view class="duoxuan">
					<u-radio-group v-model="value">
						<u-radio shape="circle" size="50rpx" iconSize="30rpx"></u-radio>
					</u-radio-group>
				</view>
				<!-- 中间图片 -->
				<view class="tupian">
					<image class="tupiande" src="../logo.png" mode="widthFix"></image>
				</view>
				<!-- 右边文字和价格部分 -->
				<view class="jiage">
					<view style="width: 380rpx;height: 36rpx;font-size: 28rpx;">
						啊啊啊啊啊啊啊啊
					</view>
					<view style="width: 380rpx;height: 88rpx;"></view>
					<view style="width: 380rpx;height: 56rpx;">
						<text style="float: left;color: #1ba784;"><text style="font-size: 24rpx;">￥</text><text
								style="font-size: 36rpx;">2099.00</text></text>
						<text style="float: right;margin-right: 40rpx;">
							<!-- 步进器地址：https://www.uviewui.com/components/numberBox.html -->
							<u-number-box v-model="value" @change="valChange"  buttonSize="50"></u-number-box>
						</text>
					</view>
				</view>
			</view>
			<!-- 下方获取到的数据2 -->
			<view class="zhongjian">
				<!-- 多选框 -->
				<view class="duoxuan">
					<u-radio-group v-model="value">
						<u-radio shape="circle" size="50rpx" iconSize="30rpx"></u-radio>
					</u-radio-group>
				</view>
				<!-- 中间图片 -->
				<view class="tupian">
					<image class="tupiande" src="../logo.png" mode="widthFix"></image>
				</view>
				<!-- 右边文字和价格部分 -->
				<view class="jiage">
					<view style="width: 380rpx;height: 36rpx;font-size: 28rpx;">
						啊啊啊啊啊啊啊啊
					</view>
					<view style="width: 380rpx;height: 88rpx;"></view>
					<view style="width: 380rpx;height: 56rpx;">
						<text style="float: left;color: #1ba784;"><text style="font-size: 24rpx;">￥</text><text
								style="font-size: 36rpx;">2099.00</text></text>
						<text style="float: right;margin-right: 40rpx;">
							<u-number-box v-model="value" @change="valChange" buttonSize="50"></u-number-box>
						</text>
					</view>
				</view>
			</view>
			<!-- 下方获取到的数据3 -->
			<view class="zhongjian">
				<!-- 多选框 -->
				<view class="duoxuan">
					<u-radio-group v-model="value">
						<u-radio shape="circle" size="50rpx" iconSize="30rpx"></u-radio>
					</u-radio-group>
				</view>
				<!-- 中间图片 -->
				<view class="tupian">
					<image class="tupiande" src="../logo.png" mode="widthFix"></image>
				</view>
				<!-- 右边文字和价格部分 -->
				<view class="jiage">
					<view style="width: 380rpx;height: 36rpx;font-size: 28rpx;">
						啊啊啊啊啊啊啊啊
					</view>
					<view style="width: 380rpx;height: 88rpx;"></view>
					<view style="width: 380rpx;height: 56rpx;">
						<text style="float: left;color: #1ba784;"><text style="font-size: 24rpx;">￥</text><text
								style="font-size: 36rpx;">2099.00</text></text>
						<text style="float: right;margin-right: 40rpx;">
							<u-number-box v-model="value" @change="valChange" buttonSize="50"></u-number-box>
						</text>
					</view>
				</view>
			</view><!-- 下方获取到的数据3 -->
			<view class="zhongjian">
				<!-- 多选框 -->
				<view class="duoxuan">
					<u-radio-group v-model="value">
						<u-radio shape="circle" size="50rpx" iconSize="30rpx"></u-radio>
					</u-radio-group>
				</view>
				<!-- 中间图片 -->
				<view class="tupian">
					<image class="tupiande" src="../logo.png" mode="widthFix"></image>
				</view>
				<!-- 右边文字和价格部分 -->
				<view class="jiage">
					<view style="width: 380rpx;height: 36rpx;font-size: 28rpx;">
						啊啊啊啊啊啊啊啊
					</view>
					<view style="width: 380rpx;height: 88rpx;"></view>
					<view style="width: 380rpx;height: 56rpx;">
						<text style="float: left;color: #1ba784;"><text style="font-size: 24rpx;">￥</text><text
								style="font-size: 36rpx;">2099.00</text></text>
						<text style="float: right;margin-right: 40rpx;">
							<u-number-box v-model="value" @change="valChange" buttonSize="50"></u-number-box>
						</text>
					</view>
				</view>
			</view><!-- 下方获取到的数据3 -->
			<view class="zhongjian">
				<!-- 多选框 -->
				<view class="duoxuan">
					<u-radio-group v-model="value">
						<u-radio shape="circle" size="50rpx" iconSize="30rpx"></u-radio>
					</u-radio-group>
				</view>
				<!-- 中间图片 -->
				<view class="tupian">
					<image class="tupiande" src="../logo.png" mode="widthFix"></image>
				</view>
				<!-- 右边文字和价格部分 -->
				<view class="jiage">
					<view style="width: 380rpx;height: 36rpx;font-size: 28rpx;">
						啊啊啊啊啊啊啊啊
					</view>
					<view style="width: 380rpx;height: 88rpx;"></view>
					<view style="width: 380rpx;height: 56rpx;">
						<text style="float: left;color: #1ba784;"><text style="font-size: 24rpx;">￥</text><text
								style="font-size: 36rpx;">2099.00</text></text>
						<text style="float: right;margin-right: 40rpx;">
							<u-number-box v-model="value" @change="valChange" buttonSize="50"></u-number-box>
						</text>
					</view>
				</view>
			</view>
			<!-- 结算部分 -->
			<view class="jiesuan">
				<!-- 全选 -->
				<view style="width:155rpx;height: 100rpx;">
					<text>
						<u-radio-group v-model="value" style="margin-top: 25rpx;">
							<u-radio shape="circle" size="50rpx" iconSize="30rpx"></u-radio>
						</u-radio-group>

					</text>
					<text style="font-size: 28rpx;">全选</text>
				</view>
				<!-- 合计价格 -->
				<view style="width:315rpx;height: 100rpx;">
					<text style="font-size: 28rpx;">合计:</text><text
						style="font-size: 24rpx;color: #1ba784;">￥</text><text
						style="font-size: 40rpx;color: #1ba784;">169.00</text>
				</view>
				<!-- 结算按钮 -->
				<view style="width:220rpx;height: 100rpx;">
					<u-button shape="circle" size="large" type="primary" text="去结算(6)"
						style="width: 220rpx;height: 80rpx;font-size: 28rpx;margin: 10rpx 0 0 0;"></u-button>
				</view>
			</view>
		</view>
		<!-- 未登录显示的页面 -->
		<view class="nologin" v-else>
			<view class="middle">
				<u--image :showLoading="true" :src="src" width="380px" height="380px"></u--image>
			</view>
			<view class="word">
				<text>登录后才能看到您的购物车</text>
			</view>
			<view class="btn">
				<button class="b1" @click="fn">去登陆</button>
			</view>
		</view>
		<!-- 底部留空隙 -->
		<view class="container" style="width: 750rpx;height: 300rpx;background-color: oink;"></view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				src: "https://v-shop.shuzp.top/v2/assets/img/cart.8a1bb599.png",
				token: "",
				value: 0,
			}
		},
		methods: {
			// fn() {
			// 	uni.navigateTo({
			// 		url: '/pages/login/login',
			// 		// success: res => {},
			// 		// fail: () => {},
			// 		// complete: () => {}
			// 	});
			// },
			fn() {
				uni.navigateTo({
					url: "../login/login"
				})
			}
		},
		onShow() {
			this.token = uni.getStorageSync("token")
		},
	}
</script>

<style lang="scss" scoped>
	.big {
		box-sizing: border-box;
	}

	.middle {
		width: 100%;
		display: flex;
		justify-content: center;
		/* margin-top: 200px; */
	}

	.word {
		font-size: 35px;
		display: flex;
		justify-content: center;
		margin-top: 30px;
		font-weight: 400;
	}

	.btn {
		justify-content: center;
		display: flex;
		width: 100%;
		margin-top: 20px;
	}

	.b1 {
		width: 150px;
		height: 70px;
		font-size: 25px;
		background-color: rgb(27, 167, 132);
		color: #fff;
		font-weight: 500;
	}

	.shangmian {
		width: 710rpx;
		height: 88rpx;
		line-height: 88rpx;
	}

	.zhongjian {
		width: 650rpx;
		height: 212rpx;
		background-color: #dfdfdf;
		padding: 10rpx 30rpx;
	}

	.duoxuan {
		width: 80rpx;
		height: 40rpx;
		margin-top: 10%;
		float: left;
	}

	.tupian {
		width: 160rpx;
		height: 160rpx;
		float: left;
		margin: 15rpx 0 0 20rpx;
	}

	.tupiande {
		width: 160rpx;
		height: 160rpx;
	}

	.jiage {
		width: 390rpx;
		height: 180rpx;
		padding-left: 40rpx;
		box-sizing: border-box;
		float: left;
	}

	.jiesuan {
		width: 750rpx;
		height: 100rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		top: 800rpx;
		background-color: #dfdfdf;
	}

	.jiesuan view {
		float: left;
		line-height: 100rpx;
		padding: 0 10rpx;
		text-align: center;
	}
</style>
